<template>
	<view class="pay-goods-layout">
		<view class="ensure-pay">
			{{$t('subscribed.ensurePay')}}
		</view>
		<view class="price">
			<text style="font-size: 36rpx;color:#0D3846 ;padding-top: 10rpx;">$</text>
			<text style="font-size: 50rpx;color:#0D3846 ;padding-left: 10rpx;">{{item.price}}</text>
		</view>

		<view class="line"></view>
		<view class="hint">
			{{$t('subscribed.payerror')}}
		</view>
		<view class="pay-type">
			<view class="title">
				{{$t('subscribed.payType')}} 
			</view>
			<view class="strip">
				<image src="../../static/pay/stripe.png" mode="aspectFill"></image>
			</view>
			
			
		</view>
	<!-- 	<view class="emial">
				{{$t('subscribed.email')}} 
			Email
		</view>
		<view class="input-email">
			<input class="email-filed" value="" placeholder-style="color:#999" :placeholder="$t('subscribed.email')" @input="inputEmail" />
		</view>
		<view class="agreehint">
			{{$t('subscribed.agreehint')}} 
			
		</view> -->
		<!-- <view class="agreement-row">
			<checkbox-group @change="clickCheck()">
				<label style="color:#666;font-size: 26rpx;">
					<checkbox value="cb" color="#1296db" activeBorderColor="#1296db" />{{$t('subscribed.agreen')}}
				</label>
			</checkbox-group>
			<navigator url="/pages/privacy/privacy">
				<view class="agreement" @click="toPrivacy">
					{{$t('subscribed.Ploicy')}} 
	
				</view>
			</navigator>
		</view> -->
		<!-- <view class="pay-hint">
			{{$t('subscribed.payhint')}}
		</view> -->
		<view class="buy" @click="toBuyGoods">
			{{$t('subscribed.ensurePay')}}
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
import { i18nTool } from '../../utils/i18en';
	const checked = ref(false);
	const emits = defineEmits(['payForGoodsBill']);
	 const email = ref(null);
	//同意复选框
	const clickCheck = () => {
		checked.value = !checked.value;
	}
	//去看隐私协议
	const toPrivacy= ()=>{
		
	}
	const inputEmail=(e)=>{
		email.value = e.detail.value;
	}
	//确认支付下单
	const toBuyGoods=()=>{
		// if(!email.value){
		// 	uni.showToast({
		// 		title:i18nTool('subscribed.emailErr'),
		// 		icon:"none",
		// 	})
		// 	return
		// }
		// if(!checked.value){
		// 	uni.showToast({
		// 		title:i18nTool('subscribed.Ploicyerr'),
		// 		icon:"none",
		// 	})
		// 	return
		// }
		emits('payForGoodsBill',email.value)
	}
	
	defineProps({
		item: {
			type: Object,
			default () {
				return {
					"id": 2,
					"name": "1 month Plan", //商品名称
					"price": 9.99, //价格
					"currency": "USD", //货币,USD EUR
					"months": 1, //为几个月的
					"detail": "qqqq", //详情
					"autoPlan": 1, //是否为订阅计划
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.pay-goods-layout {
		height: 500rpx;
		background-color: #fff;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		padding: 20rpx 40rpx;

		.ensure-pay {
			font-size: 30rpx;
			color: #666;
		}

		.price {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
		}

		.line {
			height: 2rpx;
			margin: auto;
			margin-top: 20rpx;
			width: calc(100vw - 80rpx);
			background-color: #999;
		}

		.hint {
			font-size: 24rpx;
			color: #666;
			padding-top: 24rpx;
		}
		.pay-type{
			font-size: 26rpx;
			color: #666;
			padding-top: 24rpx;
			display: flex;
			align-items: center;
			.strip{
				width: 80rpx;
				height: 60rpx;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					height: 100%;
					width: 100%;
					
				}
			}
			
		}
		.emial {
			padding-top: 20rpx;
			font-size: 30rpx;
			color: #666;
		}

		.input-email {
			padding-top: 20rpx;
			border-bottom: 2rpx solid #BDBDBD;
			height: 80rpx;

			.email-filed {
				height: 100%;
				color: #333;
				font-size: 30rpx;
			}
		}

		.agree-hint {
			font-size: 24rpx;
			color: #999;
			padding-top: 20rpx;
		}

		.agreement-row {
			padding-top: 20rpx;
			display: flex;
			justify-content: start;
			align-items: center;
			.agreement{
				padding-left: 5rpx;
				font-size: 26rpx;
				color:#1296db;
			}
		}
		.pay-hint{
			padding-top: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
		.buy{
			bottom: 50rpx;
			position: absolute;
			height: 80rpx;
			width: calc(100vw - 80rpx);
			border-radius: 40rpx;
			justify-content: center;
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			background-color: #0D3846;
		}
	}
</style>